﻿@{
    ViewData["Title"] = "Home Page";
}
<div id="index" class="page-content">
    <section class="grid lg:grid-cols-2 max-w-7xl mx-auto">
        <div class="flex flex-col justify-center lt-lg:mb-12">
            <h2 class="text-4xl font-bold tracking-tight sm:text-5xl mb-10">{{ pageTitle }}</h2>
            <p class="text-lg leading-8 txt-1 max-w-120">{{ pageDescription }}</p>
            <p class="text-lg leading-8 txt-1 max-w-120">—— <b class="text-base">{{ pageSubtitle }}</b></p>
            <div class="mt-10 flex items-center gap-x-4">
                <button tabindex="0"
                    class="semi-button semi-button-primary semi-button-size-large h-12 text-base px-6 rd-full green-to-blue transition transition-300 hover:-translate-y-1 shadow-btn"
                    type="button" aria-disabled="false" aria-describedby="xon3wkh" data-popupid="xon3wkh">
                    <span class="semi-button-content" x-semi-prop="children">{{ button1Text }}</span>
                </button>
                <button
                    class="semi-button semi-button-tertiary semi-button-size-large semi-button-borderless h-12 text-base px-6 rd-full bo-1! flex-y-center transition transition-300 hover:-translate-y-1 shadow-btn semi-button-with-icon"
                    type="button" aria-disabled="false">
                    <span class="semi-button-content">
                        <i class="flex-center i-tabler:alien-filled w-5 h-5"></i>
                        <span class="semi-button-content-right" x-semi-prop="children">{{ button2Text }}</span>
                    </span>
                </button>
            </div>
            <div class="mt-16">
                <b>{{ commonAppsTitle }}</b>
                <div class="flex items-center gap-5 mt-5 flex-wrap relative">
                    <template v-for="(app, index) in commonApps" :key="index">
                        <a :title="app.title" class="w-13 h-13 bg-1 rd-lg bo-1 flex-center shadow-card-sm" tabindex="0"
                            :href="app.href" :aria-describedby="app.ariaDescribedby" :data-popupid="app.dataPopupid">
                            <i class="flex-center" :class="app.iconClass" :style="{ color: app.color }"
                                :width="app.width" :height="app.height"></i>
                        </a>
                    </template>
                    <a title="查看更多" href="/help?tab=apps">
                        <i class="flex-center i-tabler:dots w-8 h-8 txt-1!"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="relative flex justify-center shrink-0">
            <div
                class="absolute w-full op-60 blur-120 -top-10
                before:absolute before:content-[&quot;&quot;] before:block before:w-90 before:h-90 before:max-w-full before:rd-full before:bg-indigo before:top-45
                after:absolute after:content-[&quot;&quot;] after:block after:w-90 after:h-90 after:max-w-full after:rd-full after:bg-teal after:lg:left-30">
            </div>
            <div class="semi-lottie absolute -top-32 op-60 -z-1 of-hidden lt-2xl:hidden 2xl:w-210 2xl:h-210">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800"
                    width="800" height="800" preserveAspectRatio="xMidYMid meet"
                    style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
                    <!-- SVG content here -->
                </svg>
            </div>
            <div
                class="relative bg-white/100 dark:bg-dark/80 w-full lg:w-500px max-w-full rd-lg p-6 md:p-12 pr-8 pb-5 transition duration-250 perspective-right hover:scale-106 shadow-lg">
                <h2 class="text-xl mb-5 font-bold sm:text-2xl txt-0">{{ stableOperationTitle }}</h2>
                <p class="text-lg leading-8 text-muted">{{ stableOperationDescription }}</p>
                <ul class="semi-timeline home-timeline semi-timeline-left">
                    <li v-for="(item, index) in timelineItems" :key="index"
                        class="semi-timeline-item semi-timeline-item-left">
                        <div class="semi-timeline-item-tail" aria-hidden="true"></div>
                        <div class="semi-timeline-item-head semi-timeline-item-head-custom semi-timeline-item-head-default"
                            aria-hidden="true">
                            <div class="w-8 h-8 rd-full flex-center text-base text-white"
                                :style="{ background: item.bgColor }">
                                <i class="flex-center" :class="item.iconClass"></i>
                            </div>
                        </div>
                        <div class="semi-timeline-item-content">
                            <b class="text-15px">{{ item.title }}</b>
                            <div class="semi-timeline-item-content-time">{{ item.description }}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    @* <section>
    <div class="card-container">
    <!-- 价格倍率卡片 -->
    <div class="semi-card w-full shadow-card-sm rd-10px! p-2 semi-card-bordered">
    <div class="semi-card-header">
    <div class="semi-card-header-wrapper">
    <div class="semi-card-meta">
    <div class="semi-card-meta-avatar">
    <i class="flex-center rd-16px bg-gradient-info text-white" style="width: 42px; height: 42px;">
    <span role="img" aria-label="dollar" class="semi-icon semi-icon-default semi-icon-dollar">
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false"
    aria-hidden="true">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5523 6.44772 12.4477 7 13Z" fill="currentColor"></path>
    </svg>
    </span>
    </i>
    </div>
    <div class="semi-card-meta-wrapper">
    <div class="semi-card-meta-wrapper-title">
    <span class="text-base">{{ priceCardTitle }}</span>
    </div>
    <div class="semi-card-meta-wrapper-description">
    <span class="truncate">{{ priceCardDescription }}</span>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="semi-card-body" style="padding: 6px 20px;">
    {{ priceDescription }}
    </div>
    <div class="semi-card-footer" x-semi-prop="footer" style="display: flex; justify-content: flex-end;">
    <div class="semi-space semi-space-align-center semi-space-horizontal semi-space-tight-horizontal
    semi-space-tight-vertical" x-semi-prop="children">
    <button class="semi-button semi-button-tertiary semi-button-borderless" type="button" aria-disabled="false">
    <span class="semi-button-content" x-semi-prop="children">{{ priceCardButton1Text }}</span>
    </button>
    </div>
    </div>
    </div>

    <!-- 模型支持卡片 -->
    <div class="semi-card w-full shadow-card-sm rd-10px! p-2 semi-card-bordered">
    <div class="semi-card-header">
    <div class="semi-card-header-wrapper">
    <div class="semi-card-meta">
    <div class="semi-card-meta-avatar">
    <i class="flex-center rd-16px bg-gradient-info text-white" style="width: 42px; height: 42px;">
    <span role="img" aria-label="cloud" class="semi-icon semi-icon-default semi-icon-cloud">
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false"
    aria-hidden="true">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 3C14.5944 3 17.1837 5.16226 17.8395 8.05827C20.7558 8.46659
    23 10.9712 23 14C23 17.3137 20.3137 20 17 20H5.5C5.49998 20 5.49997 20 5.49995 20C3.01469 20 1 17.9853 1 15.5C1
    13.1234 2.84229 11.1772 5.17664 11.0114C5.06115 10.5264 5 10.0204 5 9.5C5 5.91015 7.91015 3 11.5 3Z"
    fill="currentColor"></path>
    </svg>
    </span>
    </i>
    </div>
    <div class="semi-card-meta-wrapper">
    <div class="semi-card-meta-wrapper-title">
    <span class="text-base">{{ modelSupportCardTitle }}</span>
    </div>
    <div class="semi-card-meta-wrapper-description">
    <span class="truncate">{{ modelSupportCardDescription }}</span>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="semi-card-body" style="padding: 6px 20px;">
    {{ modelSupport }}
    </div>
    <div class="semi-card-footer" x-semi-prop="footer" style="display: flex; justify-content: flex-end;">
    <div class="semi-space semi-space-align-center semi-space-horizontal semi-space-tight-horizontal
    semi-space-tight-vertical" x-semi-prop="children">
    <button class="semi-button semi-button-tertiary semi-button-borderless" type="button" aria-disabled="false">
    <span class="semi-button-content" x-semi-prop="children">{{ modelSupportCardButton1Text }}</span>
    </button>
    <button class="semi-button semi-button-tertiary semi-button-borderless" type="button" aria-disabled="false">
    <span class="semi-button-content" x-semi-prop="children">{{ modelSupportCardButton2Text }}</span>
    </button>
    </div>
    </div>
    </div>
    </div>
    </section> *@
</div>

@section Scripts {
    <script type="text/javascript">
        new Vue({
            el: '#index',
            data: {
                pageTitle: 'V3 Api',
                pageDescription: '使用标准的OpenAI接口协议访问160+模型，不限时间、按量计费、拒绝逆向、极速对话、明细透明，无隐藏消费，在线充值后即可使用所有模型。',
                pageSubtitle: '极速响应，让速度为您见证一切！',
                button1Text: '前往控制台',
                button2Text: '查看帮助',
                commonAppsTitle: '常用应用支持',
                commonApps: [
                    { title: 'ChatGPT.好友（推荐）', href: '/help?tab=apps&app=Tab-gpt-friend', ariaDescribedby: 'iggr9pg', dataPopupid: 'iggr9pg', iconClass: 'i-custom:utools', width: '8', height: '8' },
                    { title: 'Chat-next-Web', href: '/help?tab=apps&app=Tab-nextchat', ariaDescribedby: 'teu2ncr', dataPopupid: 'teu2ncr', iconClass: 'i-custom:chatweb', width: '8', height: '8' },
                    { title: 'BotGEM (移动端)', href: '/help?tab=apps&app=Tab-botgem', ariaDescribedby: 'wx4uw62', dataPopupid: 'wx4uw62', iconClass: 'i-custom:botgem', width: '9', height: '9' },
                    { title: 'ChatAir (安卓端)', href: '/help?tab=apps&app=Tab-chatair', ariaDescribedby: '0ef8iuu', dataPopupid: '0ef8iuu', iconClass: 'i-icon-park:android', width: '9', height: '9' },
                    { title: '沉浸式翻译', href: '/help?tab=apps&app=Tab-fy', ariaDescribedby: 'e0e5vh9', dataPopupid: 'e0e5vh9', iconClass: 'i-mingcute:translate-2-line text-pink', width: '10', height: '10' },
                    { title: 'OpenAI官方库', href: '/help?tab=doc', ariaDescribedby: '4zc4fls', dataPopupid: '4zc4fls', iconClass: 'i-tabler:brand-openai', width: '9', height: '9' },
                    { title: 'Cursor', href: '/help?tab=apps&app=Tab-cursor', ariaDescribedby: 'tefyu6u', dataPopupid: 'tefyu6u', iconClass: 'i-custom:cursor', width: '9', height: '9' }
                ],
                stableOperationTitle: '稳定运营',
                stableOperationDescription: '我们为您提供可持续高质量的服务，采用先进的技术架构，确保API服务的稳定性和高可用性。',
                timelineItems: [
                    { title: '按量付费', description: '用多少买多少，余额不过期，用完为止，可再充值', iconClass: 'i-tabler:moneybag', bgColor: 'blue' },
                    { title: '应用支持', description: '支持OpenAi官方库、99%的开源聊天应用皆可支持', iconClass: 'i-tabler:api-app', bgColor: 'cyan' },
                    { title: '明细可查', description: '统计每次请求消耗明细，价格透明，无隐藏消费，用的放心', iconClass: 'i-tabler:message-2-search', bgColor: 'indigo' },
                    { title: '并发满足', description: '默认并发满足大部分用户需求，超高并发需求请联系客服', iconClass: 'i-tabler:arrows-random', bgColor: 'green' },
                    { title: '稳定性高', description: '日志公开每次模型请求速度，稳定性远高于Azure中转。', iconClass: 'i-tabler:refresh', bgColor: 'yellow' }
                ],
                priceDescription: '纯官转 1刀=2.00~2.5元，非逆向、非Azure，GPT3.5五折优惠（定价透明，调价必公告，无消费陷阱）',
                modelSupport: '支持ChatGPT、Claude3.5、Gemini、Midjourney、Luma、Runway...及国内厂商，多达上百种模型。',
                links: [
                    { text: '模型价格', url: '/pricing' },
                    { text: '应用教程', url: '/help?tab=apps' },
                    { text: '消耗计算', url: 'https://tokens.gpt.ge/' },
                    { text: '联系我们', url: '/help' },
                    { text: 'API文档', url: 'https://api-gpt-ge.apifox.cn' },
                    { text: '隐私政策', url: '/privacy-policy.html' }
                ],
                socialLinks: [
                    { icon: 'i-ri:qq-fill', color: 'blue-500' },
                    { icon: 'i-ri:wechat-fill', color: 'green-500' },
                    { icon: 'i-mingcute:telegram-fill', color: 'sky-500' },
                    { icon: 'i-fluent:mail-20-filled', color: 'indigo-500' }
                ],
                priceCardTitle: '价格倍率',
                priceCardDescription: '定价策略透明公开，无隐藏费用',
                priceCardButton1Text: '模型价格',
                modelSupportCardTitle: '模型支持',
                modelSupportCardDescription: '全面、易用、优质、极速、稳定',
                modelSupportCardButton1Text: '查看API文档',
                modelSupportCardButton2Text: '查看所有模型',

            },
            methods: {
                // 可以在这里定义方法
            }
        });
    </script>
}